<%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>深圳市橄榄树助飞基金-个人注册</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript">
var Checking = {};
Checking = {

        $ : function(id) {
 return document.getElementById(id);
 },

 color : ['#FF0000', '#00FF66', '#FFFF00', '#FFCC00', '#6600FF', '#0000FF','#99FFFF', '#66CCFF'],
 cacheValue : null,// 缓存画布上的值,比对时用

 draw : function() {
  var div = this.$('ieContainer'), sty = div.style;
  div.onselectstart = new Function("return false");// 禁止选中
  div.oncopy = new Function("return false");// 禁止复制

  sty.height = "30px";
  sty.width = "125px";
  var bgColor = this.getRandomColor();// div背景色
  sty.backgroundColor = bgColor;
  sty.font = "26pt Kristen ITC";  //Calibri
  var fontColor = this.getRandomColor();// 文字颜色
  sty.color = bgColor == fontColor ? this.getRandomColor() : fontColor;// 保证文字色基本不会跟背景色一样
  sty.textAlign = "center";
  // 设置div颜色渐变效果
  sty.filter = "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr= "
    + bgColor + ", EndColorStr= " + this.getRandomColor() + ")";
  var newText = this.getRandomDigit_Letters(5);
  this['cacheValue'] = newText;// 临时存贮生成的验证码，校验时使用
  div.innerHTML = newText;
 },
  //画背景
  //createLinearGradient() 方法创建一条线性颜色渐变。返回一个线性颜色渐变的一个 CanvasGradient对象。
 drawBgColor : function(context) {
  var grd = context.createLinearGradient(100, 100, 70, 18);
  var startColor = this.getRandomColor();
  var endColor = this.getRandomColor();
  grd.addColorStop(0, startColor);
  grd.addColorStop(1, startColor == endColor
      ? this.getRandomColor()
      : endColor);
  context.fillStyle = grd;
  context.fillRect(100,100, 800, 600);
 },

 //画文字
 drawText : function(context) {
  var x = 60;
  var y = 30;
  context.font = "30pt Kristen ITC";
  context.textAlign = "center";
  context.fillStyle = this.getRandomColor();
  var newText = this.getRandomDigit_Letters(5);
  this['cacheValue'] = newText;
  context.fillText(newText, x, y);
 },

 //获得随机颜色
 getRandomColor : function() {
  var len = this.color.length, random = this.getBigRandom(len);
  return this['color'][random];
 },

 //根据scale以内的随机整数
 getBigRandom : function(scale) {
  return Math.floor(Math.random() * (scale || 10));
 },

 //获得画布上的字符串,字母与数字的随机组合
 getRandomDigit_Letters : function(length) {
  var result = [];
  var arr = this.getLetters().concat(this.getDigit());
  for (var i = 0; i < length; i++) {
   result.push(arr[this.getBigRandom(35)]);
  }
  return result.join("");

 },

 //获得0～9的数组
        getDigit : function() {
  var arr = [];
  for (var i = 0; i < 10; i++) {
   arr.push(i);
  }
  return arr;
 },

 //获得a～z的字母数组
 getLetters : function() {
  var arr = [];
  var start = "a".charCodeAt();
  var end = "z".charCodeAt();

  for (var i = start; i <= end; i++) {
   if (i % 2 == 0) {
    arr.push(String.fromCharCode(i));
   } else {
    arr.push(String.fromCharCode(i).toUpperCase());
   }

  }
  return arr;
 },

 // 判断
 check : function() 

 {
  var chkValue = this['cacheValue'].toUpperCase();
  var inputValue = this.$('chk').value.toUpperCase();
                 if (chkValue !== inputValue)
                {     
                      alert("验证码输入错误！");
                      return false;                      
                 }
                else
                     return true;             
 }
}
function Juge(theForm)
{

      var p1=document.getElementById("form_password1").value
          var p2=document.getElementById("form_password2").value
          var name = document.getElementById("username").value
               
           if(document.getElementById("username").value == "")
                 {
                      alert("用户名不能为空!")
                      document.getElementById("username").focus();
                      return false;
                  }
           if(document.PostTopic.username.value.length<3||document.PostTopic.username.value.length>20)
		                  {
                      alert("用户名长度不符合!")
                      document.getElementById("username").focus();
                      return false;
                  }
                
           if(document.getElementById("form_password1").value=="")
                 {
                      alert("密码不能为空!")
                      document.getElementById("form_password1").focus();
                      return false;
                  }
		
                 
           if(document.getElementById("form_password2").value=="")
                 {
               alert("请输入确认密码")
                      document.getElementById("form_password2").focus();
                                 return false;
                  }
            if(document.PostTopic.form_password1.value.length <=5){
                           alert("密码长度不符合！")
                      document.getElementById("form_password1").focus();
                                 return false;
            }    
        
       if(p1!=p2)
       { 
                  
           alert("两次输入的密码不相同!")
                  document.getElementById("form_password1").focus();
                  document.getElementById("form_password1").value="";
                  document.getElementById("form_password2").value="";
                  
           return false;
        }
                   if(document.getElementById("email").value == "")
                 {
                      alert("邮箱不能为空!")
                      document.getElementById("email").focus();
                      return false;
                  }
                  reg=/^([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\-|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/gi;
                  
                  if(!reg.test(document.getElementById("email").value )){
                  	 alert("邮箱格式错误!")
                      document.getElementById("email").focus();
                      return false;	
                  	}
            if(document.getElementById("question").value == "")
                 {
                      alert("问题不能为空!")
                      document.getElementById("question").focus();
                      return false;
                  }
            if(document.getElementById("answer").value == "")
                 {
                      alert("答案不能为空!")
                      document.getElementById("answer").focus();
                      return false;
                  }
         	                var a=Checking.check();
        if(a)
            return true;
        else
         {   Checking.draw();
             document.getElementById("chk").focus();
         	 document.getElementById("chk").value="";
            return false;
         }
}       
</script>
</head>

<body onLoad="Checking.draw()">
<div class="head">
	<div class="top">
		<div class="logo"><img src="images/logo.jpg" /></div>
		<div class="topmenu">
			<a href="#">关于我们</a> |
			<a href="#">加入收藏</a> |
			<a href="#">设为首页</a>
		</div>
	</div>
	<div class="menu">
	
		<div class="main">
			<ul>
				<li><a href="index.jsp">首页</a></li>
				<li><a href="aboutus.jsp">关于我们</a></li>
				<li><a href="fengcaiServlet">残友风彩</a></li>
				<li><a href="#">论坛</a></li>
				<li><a href="lovesInfo.jsp">爱心企业与个人</a></li>
				<li class="bgnone"><a href="registration.jsp">我要参与</a></li>
			</ul>
		</div>
	
	</div>
	
	<div class="banner">
		<img src="images/banner.jpg" />
	</div>
</div>
<div class="aboutus">
	<div class="p140">
		<img src="images/reg03.jpg" />
	</div>
    <form method="post" onSubmit="return Juge(PostTopic)" name="PostTopic" id="PostTopic" action = "userServlet?action=signIn" >
	<div class="reg01">
		<div class="fl"><span class="redfont">*</span> 登 录 名： 
		  <input type="text" name="username" id="username" maxlength="16" size="25"  >
           <span class="font999">3-16个字符（包括3、16）或3-8个汉字</span></div>
		<div class="fl"><span class="redfont">*</span> 登录密码： 
	 <input type="password" name="form_password1"id="form_password1" maxlength="30" size="25" > 	        
	  <span class="font999">密码须为6位或6以上的字母/数字/下划线</span></div>
		<div class="fl"><span class="redfont">*</span> 确认密码： 
		<input type="password" name="form_password2"id="form_password2" maxlength="30" size="25" >
		  <span class="font999">确认以上输入的密码</span></div>
         <div class="fl"><span class="redfont">*</span> 性别：
	   <input type="radio" name="sex" value ="男" checked> 男
		<input type="radio" name="sex" value ="女" > 女
	  </div>  
	  <div class="fl"><span class="redfont">*</span> 电子邮箱：
	    <input type="text" name="email" id="email"/>
	  </div>
      <div class="fl"><span class="redfont">*</span> 密码问题：
	    <input type="text" name="question" id="question"/>
	  </div>
      <div class="fl"><span class="redfont">*</span> 密码答案：
	    <input type="text" name="answer" id="answer"/>
	  </div>
	  <div class="fl"><span class="redfont">*</span> 验 证 码: 
	<input type="text"  name="chk" id="chk" style="width:50px;"/>
	<div  id="ieContainer" onDblClick="Checking.init()"> </div>
 	<span class="font999">输入图片中的字符</span></div>
		<div class="fl"><button><img src="images/b01.jpg" /></button></div>
	</div>
    </form>
    </div>
    
</div>

<div class="footer">
	深圳市橄榄树助飞基金<br>
	地址：深圳市罗湖区宝安南路3097号洪涛大厦四楼<br>
	电话：0755-25595903、25590786 传真：25595900<br>
	Copyright &copy; 2011 www.glszhufei.com , All Rights Reserved.
</div>
</body>
</html>


